<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleTabChange">
			<el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label" :name="item.value"></el-tab-pane>

			<div class="content-card">
				<!-- <html-label :title="activeLabelTitle">
					<div v-if="!(nowRowData.dataStatus && nowRowData.dataStatus !== '0') && ['BaseDetail', 'Extend', 'ObjectOther'].includes(activeName)">
						<el-button
							v-auth="[nowRowData.isOperate == 1, baseConfig.auth.edit]"
							type="primary"
							plain
							@click="handleOperate(activeName == 'ObjectOther' ? 'rechange' : 'rechange')"
						>
							信息变更
						</el-button>
					</div>
				</html-label> -->
				<component
					v-if="!loading"
					class="pd10"
					:is="whickComm[activeName]"
					@refresh="handleRefresh"
					:nowRowData="nowRowData"
					:actionBtn="false"
					:searchConfig="false"
					:key="activeName"
					:isWithAuth="0"
					:showBtn="showBtn"
					:soleKey="`dpServiceObject-${nowRowData.idCard}`"
				></component>
			</div>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import Extend from './Extend/index.vue'
import BaseDetail from './BaseDetail/index.vue'
import ObjectOther from './ObjectOther/index.vue'
import TimeLine from './TimeLine/index.vue'
import EvaluateRate from './EvaluateRate/index.vue'
import serviceOrder from './serviceOrder/index.vue'
import HomeBed from './HomeBed/index.vue'
import VenerableGold from '@/views/datacenter/business/subsidyFunds/HonorOldGold/index.vue'
import OrgServiceInfo from './OrgServiceInfo/index.vue'
import healthArchives from './healthArchives/index.vue'
import reformArchives from './reformArchives/index.vue'
import ReceiveRcord from '@/views/datacenter/business/insteServer/ReceiveRcord/index.vue'
import PaymentRecord from '@/views/datacenter/business/insteServer/PaymentRecord/index.vue'
import DataChangeLog from '@/views/datacenter/components/DataChangeLog/index.vue'
import BlockchainInfo from './BlockchainInfo/index.vue'
import RespiteCare from './RespiteCare/index.vue'
import FamilyBedRecord from './FamilyBedRecord/index.vue'
import apiMod from '@/apiMod'
import { baseConfig } from '../../config'
import { useCommonStore } from '@/stores/common'
import { useOperate } from '@/views/datacenter/hooks/useConfig'
import bus from '@/utils/eventbus'
import { getAreaObj } from '@/utils/util'
// 打卡记录
import ClockRecord from './ClockRecord/index.vue'
import information from './information/index.vue'

const { setTempParams, setMoreSearch, setLoading, setGloabnowRowData, setDetailHeadData } = useCommonStore()
const { onDelete, onMessageChange } = useOperate(1)

const whickComm = {
	BaseDetail,
	Extend,
	ObjectOther,
	TimeLine,
	EvaluateRate,
	serviceOrder,
	HomeBed,
	VenerableGold,
	OrgServiceInfo,
	ReceiveRcord,
	PaymentRecord,
	healthArchives,
	reformArchives,
	DataChangeLog,
	BlockchainInfo,
	ClockRecord,
	information,
  RespiteCare,
  FamilyBedRecord
}
type Props = {
	nowRowData?: any
	isBlockchain?: boolean,
	showBtn?:boolean // 显示按钮
}
const props = withDefaults(defineProps<Props>(), {
	isBlockchain: false,
	showBtn:true
})
const emit = defineEmits(['refresh', 'rechange'])

const activeLabelTitle = ref('基础信息')
const loading = ref(false)
const tabsList: any = [
	{ label: '基础信息', value: 'BaseDetail' },
	{ label: '扩展信息', value: 'Extend' },
	{ label: '其他信息', value: 'ObjectOther' },
	{ label: '资料信息', value: 'information' },
	{ label: '服务时间轴', value: 'TimeLine' },
	{ label: '能力评估', value: 'EvaluateRate' },
	{ label: '机构服务和管理', value: 'OrgServiceInfo' },
	{ label: '应收账单', value: 'ReceiveRcord' },
	{ label: '缴费记录', value: 'PaymentRecord' },
	{ label: '申请家庭床位记录', value: 'FamilyBedRecord' },
	{ label: '社区居家服务工单', value: 'serviceOrder' },
	{ label: '家庭养老床位建设档案', value: 'HomeBed' },
	{ label: '尊老金', value: 'VenerableGold' },
	{ label: '喘息服务补贴', value: 'RespiteCare' },
	{ label: '健康档案', value: 'healthArchives' },
	{ label: '适老化改造', value: 'reformArchives' },
	{ label: '信息编辑记录', value: 'DataChangeLog' },
	{ label: '老人打卡记录', value: 'ClockRecord' },
	{ label: '上链信息', value: 'BlockchainInfo' },
]
const activeName = ref('BaseDetail')
let nowData = ref({})
provide('nowRowData', nowData)
const getInitData = () => {
	// 如果是区块链查看页面的话
	if (props.isBlockchain) {
		loading.value = true
		setLoading(true)
		nowData.value = {
			dpServiceObjectContacts: props.nowRowData.bcServiceObjectContact ? JSON.parse(props.nowRowData.bcServiceObjectContact) : [],
			dpServiceObjectExtends: {
				...props.nowRowData,
			},
			dpServiceObjectMaterials: props.nowRowData.bcServiceObjectMaterial ? JSON.parse(props.nowRowData.bcServiceObjectMaterial) : [],
			dpServiceObjectOthers: {
				...props.nowRowData,
			},
			dpServiceObjects: {
				...props.nowRowData,
			},
		}
		// 将基础，拓展，其他存到stores,用于详情中的头部卡片展示
		setDetailHeadData(props.nowRowData)
		setGloabnowRowData(nowData.value)
		setTimeout(() => {
			loading.value = false
			setLoading(false)
		}, 100)
	} else {
		loading.value = true
		setLoading(true)
		if (props.nowRowData?.idCard) {
			apiMod
				.view_dpServiceObjectAll_view({
					idCard: props.nowRowData?.idCard,
				})
				.then((res) => {
					const baseObj = {
						...(res.data.dpServiceObjects[0] || {}),
					}
					let buildInfoName = [baseObj.checkinBuilding, baseObj.checkinFloor, baseObj.checkinRoom, baseObj.checkinBedCode].filter(Boolean).join('/')
					const crAreaName = getAreaObj(baseObj, 'cr')
					const areas_name = getAreaObj(baseObj, '')

					const data = {
						dpServiceObjects: {
							...baseObj,
							buildInfoName,
							areas_name,
							crAreaName,
							integrity: props.nowRowData.integrity,
						},
						dpServiceObjectExtends: res.data.dpServiceObjectExtends[0] || {},
						dpServiceObjectOthers: res.data.dpServiceObjectOthers[0] || {},
						dpServiceObjectMaterials: res.data.dpServiceObjectMaterials,
						dpServiceObjectContacts: res.data.dpServiceObjectContacts,
					}
					loading.value = false
					nowData.value = data
					// 将基础，拓展，其他存到stores,用于详情中的头部卡片展示
					setDetailHeadData({ ...data.dpServiceObjects, ...data.dpServiceObjectExtends, ...data.dpServiceObjectOthers })
					setGloabnowRowData(nowData.value)
					setLoading(false)
				})
				.catch((err) => {
					loading.value = false
				})
		}
	}
}

const openEdit = () => {
	onMessageChange().then(() => {
		const activeStr = {
			BaseDetail: 1,
			Extend: 2,
			ObjectOther: 3,
		}
		setTempParams({
			idCard: props.nowRowData.idCard,
			active: activeStr[activeName.value] || 1,
		})
		emit('rechange', 'Rechange', props.nowRowData, '信息变更数据')
	})
}

const handleOperate = (type) => {
	if (type == 'delete') {
		onDelete(props.nowRowData[baseConfig.rowKey], baseConfig.api.delete, props.nowRowData.name).then(() => {
			emit('refresh')
		})
		return
	} else if (type == 'rechange') {
		openEdit()
	} else {
		emit('rechange', 'edit', props.nowRowData, '信息编辑数据')
	}
}

const handleRefresh = () => {
	emit('refresh')
}
const handleTabChange = (tab) => {
	activeLabelTitle.value = tab.props.label
	setMoreSearch({
		params: {
			idCard: props.nowRowData.idCard,
			creditCode: props.nowRowData.creditCode,
		},
	})
}

bus.on('menu-operate', (res) => {
	handleOperate(res.operate)
})

onMounted(() => {
	getInitData()
})
onUnmounted(() => {
	setMoreSearch({})
	setDetailHeadData(undefined)
})
</script>

<style scoped></style>
